<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
  <title>flex布局</title>
  <style>
    /* 页脚固定在底部 */
    *{
      margin: 0;
      padding: 0;
    }
    html,body{
      height:100%;
    }
    #wrapper { height: 100%; display: flex; flex-direction: column;color:#fff;}
    #header, #body, #footer { width: 100%; }
    #header { flex: 0 0 auto; height:20px;background-color: red;}
    #body { flex: 1 0 auto; background-color: green}
    #footer { flex: 0 0 auto; background-color: blue;height:80px;line-height:80px;}
  </style>
</head>

<body>
  <div id="wrapper">
    <div id="header">header</div>
    <div id="body">body</div>
    <div id="footer">footer</div>
  </div>

</body>
</html>
